<template>
	<view>
		<text class="todoTitle">todolist待办事项</text>
		<input placeholder="请输入待办事项" v-model="newTodo">
		<button @click="addTodo">添加</button>
	</view>

	<view>
		<text>待办事件</text>
		<view v-for="(item,index) in todo" :key="index">
			<!-- <text>{{item}}</text> -->
			<checkbox checked={{item.completed}}></checkbox>
			<text>待办事项：{{item.title}}</text>
			<button />编辑</button>
			<button @click="deleteTodo(item.id)">删除</button>
			<hr>
			<br>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'; // 导入ref响应式API
	// import {
	// 	addTodos
	// } from '../untils/tododReuqest.js'

	// 使用ref定义响应式变量
	let todo = ref('');
	let newTodo = ref('');


	function getTodo() {
		uni.request({
			url: 'http://localhost:3000/todos',
			method: 'GET'
		}).then(res => {
			todo.value = res.data;
			console.log(todo.value);
		})
	}
	getTodo();

	function addTodo() {
		const value = newTodo.value;
		if (value) {
			uni.request({
				url: 'http://localhost:3000/todos',
				method: "POST",
				data: {
					title: value,
					completed: '1'
				}
			}).then(res => {
				console.log(res)
				getTodo();
			})
			newTodo.value = ""; // 清空输入框
		}
	}

	function deleteTodo(id) {
		uni.request({
			url: `http://localhost:3000/todos/${id}`,
			method: 'DELETE'
		}).then(res => {
			getTodo();
		})
	}
</script>

<style>

</style>